<script setup lang="ts">
import { BaseApi } from "@/apis/base.api";
import { UtilTool } from "@webxue/common";
import { useWebxRouteTabs } from "@webxue/vue3-antdv-ui";
import useForm from "@/hooks/useForm";
import useCusRouter from "@/hooks/useCusRouter";
import EventEmitTool from "@/utils/tools/event-emit.tool";

// 获取路由属性
const { router, routeQuery } = useCusRouter({
  queryKeys:[
    // 权限id
    "permissionId",
    // 是否只读
    "readonly"
  ]
});
// 页签
const { addParentTab } = useWebxRouteTabs({ router });
// 获取详情hook
const { detailInfo, formRef, formState, onValidateFields, getFormRules } = useForm({
  // 获取表单数据
  formState: {} as Record<string, any>,
  // 获取详情数据
  async onInit() {
    // 数据初始化
    formState.value.status = 1;

    if (!routeQuery.value.permissionId) return false;
    const response = await BaseApi.permission.find({ id: routeQuery.value.permissionId });
    // 回显权限信息
    formState.value = UtilTool.lodash.cloneDeep(response.data);
    return Promise.resolve(response);
  },
  // 表单校验成功回调
  async onValidateSuccess(values) {
    // 响应结果
    let response: Partial<ResponseData> = {};
    // 请求参数
    const requestBody: Record<string, any> = {
      permissionName: values.permissionName,
      permissionCode: values.permissionCode,
      remark: values.remark,
    };
    if (routeQuery.value.permissionId) {
      // 编辑
      response = await BaseApi.permission.update({
        ...requestBody,
        id: routeQuery.value.permissionId
      });
    } else {
      // 新增
      response = await BaseApi.permission.save({
        ...requestBody
      });
    }
    if(response.success) {
      addParentTab();
    }
  }
})

// form保存回调
EventEmitTool.on("FORM:SAVE", () => {
  // 开始校验
  onValidateFields();
});
</script>

<template>
  <div>
    <WebxForm ref="formRef" :model="formState" :readonly="!!routeQuery.readonly">
      <div class="flex flex-col gap-2">
        <WebxCard :titleProps="{ title:'权限维护' }">
          <ARow class="px-2 pb-4" :gutter="[0, 10]">
            <ACol :span="8">
              <WebxFormItem label="权限名称" name="permissionName" :rules="[{ required: true, message:'请输入权限名称' }]">
                <AInput v-model:value="formState.permissionName" placeholder="请输入权限名称" />
                <template #readonly>{{ formState.permissionName }}</template>
              </WebxFormItem>
            </ACol>
            <ACol :span="8">
              <WebxFormItem label="权限编码" name="permissionCode" :rules="[{ required: true, message:'请输入权限编码' }]">
                <AInput v-model:value="formState.permissionCode" placeholder="请输入权限编码" :disabled="!!routeQuery.permissionId" />
                <template #readonly>{{ formState.permissionCode }}</template>
              </WebxFormItem>
            </ACol>
            <ACol :span="24">
              <WebxFormItem label="备注" name="remark">
                <ATextarea v-model:value="formState.remark" placeholder="请输入备注" :autoSize="{ minRows: 4, maxRows: 4 }" />
                <template #readonly>{{ formState.remark }}</template>
              </WebxFormItem>
            </ACol>
          </ARow>
        </WebxCard>
      </div>
    </WebxForm>
  </div>
</template>

<style scoped lang="less">
.ant-form-item {
  margin-bottom: 0;
  :deep(.ant-form-item-label){
    width: 120px;
  }
}
</style>
